<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app" class="root">
    <div>{{pmsg}}</div>
    <menu-item :menu-title="ptitle"></menu-item>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      父组件向子组件传值:
      1. 组件内部通过props接收传递过来的值
        Vue.component('menu-item',{
          props:['title'],
          template:`<div>{{title}}</div>`
        })
      2. 父组件通过属性将值传递给子组件 
        <menu-item title="来自父组件的值"></menu-item> => 写死的值
        <menu-item :title="title"></menu-item> => 动态绑定

      3. props 属性名规则
        - 在 props 中使用驼峰形式, HTML 模板中需要使用短横线的形式
        - 字符串形式的模板中没有这个限制
        Vue.component('menu-item',{
          props:['menuTitle'],
          template:`<div>{{menuTitle}}</div>`
        });
        <menu-item menu-title="nihao"></menu-item>
    */
    
    Vue.component('third-com',{
      props:['testTitle'],
      template:`<div>{{testTitle}}</div>`
      
    });

    Vue.component('menu-item',{
      props:['menuTitle'],
      template:`<div>{{menuTitle}}<third-com testTitle='hello'></third-com></div>`
      
    });
    
    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父组件中的内容',
        ptitle:"父组件中动态传递的数据"
      }
    });
  </script>
</body>
</html>
